<template>
    <L7MapWithGaode :mapOnloadCB="mapOnloadCB"></L7MapWithGaode>
</template>

<script lang="ts">
import {Scene, PointLayer} from '@antv/l7';
import {defineComponent, onMounted, ref} from "vue"
import L7MapWithGaode from "@/component/common/L7MapWithGaode.component.vue"

export default defineComponent({
    name: "L7.addBubble2",
    components: {L7MapWithGaode},
    setup() {
        const mapOnloadCB = (scene: Scene) => {
            scene.setZoomAndCenter(14.89, [121.435159, 31.256971])

            fetch(`${window.location.origin}/antv-test/data/893d1d5f-11d9-45f3-8322-ee9140d288ae.json`)
                .then(res => res.json())
                .then(data => {
                    const pointLayer = new PointLayer({})
                        .source(data, {
                            parser: {
                                type: 'json',
                                x: 'longitude',
                                y: 'latitude'
                            }
                        })
                        .shape('name', [
                            'circle',
                            'triangle',
                            'square',
                            'pentagon',
                            'hexagon',
                            'octogon',
                            'hexagram',
                            'rhombus',
                            'vesica'
                        ])
                        .size('unit_price', [10, 25])
                        .active(true)
                        .color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
                        .style({
                            opacity: 0.3,
                            strokeWidth: 2
                        });

                    scene.addLayer(pointLayer);
                });
        }

        return {
            mapOnloadCB
        }
    }
})
</script>

<style scoped>

</style>
